<template>
  <div class="sindex">
    <div class="swiperPannel">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><router-link to="./imageForum"
            ><img
              src="@/assets/images/scientific/banner1.png"
              alt="" /></router-link
        ></van-swipe-item>
        <van-swipe-item
          ><router-link to="./biologicalForum"
            ><img
              src="@/assets/images/scientific/banner2.png"
              alt="" /></router-link
          ></van-swipe-item
        >
        <van-swipe-item
          ><router-link to="./sofewareForum"
            ><img
              src="@/assets/images/scientific/banner3.png"
              alt="" /></router-link
          ></van-swipe-item
        >
        <van-swipe-item
          ><router-link to="./forum"
            ><img
              src="@/assets/images/scientific/banner4.png"
              alt="" /></router-link
          ></van-swipe-item
        >
      </van-swipe>
    </div>
    <div>
    <p>技术交流</p>
    <ul>

      <li @click="$router.push('./imageForum')">
        <img src="@/assets/images/scientific/image_icon.png" alt="" /><span
          >AI影像交流</span
        >
      </li>
      <li @click="$router.push('./biologicalForum')">
        <img src="@/assets/images/scientific/biomics_icon.png" alt="" /><span
          >AI生命组学交流</span
        >
      </li>
      <li @click="$router.push('./sofewareForum')">
        <img src="@/assets/images/scientific/sofeware_icon.png" alt="" /><span
          >AI软件与架构交流</span
        >
      </li>
      <li @click="$router.push('./forum')">
        <img src="@/assets/images/scientific/case_icon.png" alt="" /><span
          >案例交流</span
        >
      </li>
    </ul>
    </div>

    <van-popup v-model="pannelShow">
      <ul class="forums">
        <li @click="$router.push('./forum')">
          <img src="@/assets/images/scientific/headImg.png" alt="" /><span
            >案例交流</span
          >
        </li>
        <li @click="$router.push('./imageForum')">
          <img src="@/assets/images/scientific/headImg.png" alt="" /><span
            >AI影像交流</span
          >
        </li>
        <li @click="$router.push('./biologicalForum')">
          <img src="@/assets/images/scientific/headImg.png" alt="" /><span
            >AI生命组学交流</span
          >
        </li>
        <li @click="$router.push('./sofewareForum')">
          <img src="@/assets/images/scientific/headImg.png" alt="" /><span
            >AI软件与架构交流</span
          >
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
import { Popup } from "vant";

import { mapGetters } from "vuex";
import { getStorage } from "@/utils/auth";

export default {
  name: "sindex",
  components: {},
  data() {
    return {
      active: 0,
      pannelShow: false,
    };
  },
  computed: {
    ...mapGetters(["userData"]),
  },
  watch: {},
  methods: {
    tabChange(i) {
      this.$store.commit("list/SET_BACK_STATUS", null);
    },
  },
  created() {
    // console.log(JSON.parse(this.userData),11)
    let lang = getStorage("lang");
    this.$i18n.locale = lang ? lang : "cn";
  },
  mounted() {},
  destroyed() {},
};
</script>
<style lang='scss' scoped>
.swiperPannel {
  background: #fff;
  padding: 15px 0.15rem;
}
.my-swipe .van-swipe-item {
  color: #000;
  font-size: 20px;
  // line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
}
.swiperPannel img {
  display: block;
  width: 100%;
}
.sindex {

  &>div{
    background: #fff;

  & > p {
    padding: 15px 0 15px 15px;
    text-align: left;
    color: #333;
    font-weight: 500;
    font-size: 16px;
  }
  & > ul {
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;

    li {
      width: 47%;
      margin-right: 1%;
      text-align: center;
      // background: rgba(255, 0, 0, 0.12);
      box-shadow: rgba(21, 24, 45, 0.1) 0px 4px 12px;
      padding: 10px 0;
      margin-bottom: 5px;
      border-radius: 3px;

      img {
        display: block;
        margin: 0 auto;
        width: 50%;
        margin-bottom: 10px;
      }
      span {
        display: block;
        color: #999;
        font-size: 14px;
      }
    }
    // &> li:nth-child(1) {
    //  background: rgba(0, 161, 255 ,.22);
    // }
    //     &> li:nth-child(2) {
    //  background:rgba(63, 0 ,255 , .14);
    // }
    //     &> li:nth-child(3) {
    
    // }
    //     &> li:nth-child(4) {
    //  background: rgba(0 ,255, 67 , .17)
    // }
  }
  }
  &>div:nth-child(2){
    margin-top: 10px;
    padding-bottom: 30px;
  }
}
.forums {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  padding-top: 20px;
  li {
    width: 50%;
    text-align: center;
    margin-bottom: 20px;
    img {
      display: block;
      margin: 0 auto;
      margin-bottom: 10px;
    }
  }
}
/deep/.van-popup--center {
  width: 80%;
  border-radius: 5px;
}
</style>